<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="csrf_token" id="token" content="{{ csrf_token() }}">
    @include('public.h5_head')
    <title></title>
    <script src="{{ env('CDN_DOMAIN_NAME') }}/js/commonjs/rem.js"></script>

    <link rel="stylesheet" type="text/css" href="{{ env('CDN_DOMAIN_NAME') }}/css/commoncss/mobileSelect.css"/>
    <script src="{{ env('CDN_DOMAIN_NAME') }}/js/commonjs/mobileSelect.min.js?v=1.0.2"></script>


    <link href="{{env('CDN_DOMAIN_NAME')}}/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="{{ env('CDN_DOMAIN_NAME') }}/css/commoncss/common.css"/>
    <link rel="stylesheet" type="text/css" href="{{ env('CDN_DOMAIN_NAME') }}/css/presell.css?v=1.0.4"/>
    <link rel="stylesheet" type="text/css" href="{{ env('CDN_DOMAIN_NAME') }}/css/commoncss/swiper.min.css"/>
</head>
<style>

    .video_play{width:60px;height:60px;position:absolute;top: 0;left: 0;bottom: 0;right:0;margin:auto;z-index:10000;border-radius:50%;display:none;}
    .loading-pay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:9999;display:none;}
    .loading-pay img{width:9rem;height:2.7rem;position:absolute;left:50%;top:50%;margin-top:-1.5rem;margin-left:-4.5rem}

    img{ cursor: pointer;}
    .infoLis{width: 100%;height: 1.5rem;}

    .infoDiv{width:60%;height:1.3rem;line-height: 1.3rem;border-bottom:1px solid #ccc;float:left;font-size: 0.64rem;}

    .delI{width: 2rem;height: 1.3rem;  line-height: 1.3rem;  text-align: center;  color: #ea294b;  cursor: pointer;font-size: 0.64rem;}
    #trigger3{cursor: pointer;display: block;float:right;
        width: 2.3rem;
        height: 1.3rem;
        border-radius: 0.256rem;
        border: 1px solid #999;
        margin-bottom: 1rem;
        text-align: center;
        font-size: 0.64rem;
        line-height: 1.3rem;}
    .girard{float: left;font-size: 0.64rem;color: #383838;margin-right: 0.5rem;line-height: 1.4rem;}
    .colorInfo{width:3rem;float:left;}
    .sizeInfo,.numInfo{width:2rem;float:left;}
    .pro_price{font-size:0.9rem;}
</style>
<script src="{{ env('CDN_DOMAIN_NAME') }}/js/app.js"></script>
{{--<script src="{{ env('CDN_DOMAIN_NAME') }}/js/commonjs/iscroll.js"></script>--}}
<script src="{{ env('CDN_DOMAIN_NAME') }}/js/commonjs/swiper.min.js"></script>
<script src="{{ env('CDN_DOMAIN_NAME') }}/js/commonjs/common.js?v=1.0.2"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<body>
<div id="particulars">
    <div class="wrap">
        <div class="particulars_div">
            <div class="horn">
                <img class="horn_img" src="img/horn.gif"/>
                <div class="horn_box" id="box">

                </div>
            </div>
            <p class="particulars_p"><a class="particulars_a" href="/UserCenter">个人中心</a></p>
            <span class="span_people"><img src="/img/00011.png" alt="" /></span>
        </div>
        <div class="scro" id="scro">
            <div class="scDiv" id="scDiv">
                <div class="banner" style="height:17rem;">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            {{--<script >document.write(getGoodface());</script>--}}
                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination" style="height:1px;"></div>
                        {{--<div class="bg-swiper"></div>--}}
                    </div>
                    <div class="particulars_name"></div>
                    <div class="particulars_tit">
                        <div class="tit_left">
                            <p class="tit_name">限时抢购</p>
                            <p class="tit_change"></p>
                        </div>
                        <div class="tit_right" style="display:none">
                            <p class="tit_start">开始时间</p>
                            <p class="tit_time">00:00:00</p>
                        </div>
                    </div>
                    <input type="hidden" value="{{ time()*1000 }}" class="pro_time">

                    <input type="hidden" value="" class="start_time">
                    <input type="hidden" value="" class="end_time">
                    <input type="hidden" value="" class="titCla">
                    <input type="hidden" value="" class="desCla">
                    <input type="hidden" value="" class="imgCla">
                </div>
                <div class="par_bottom">
                    <div class="bottom_t">
                        <div class="particulars_price">
                            <p class="girard"></p>
                            <p class="unit"><span>￥</span><span class="pro_price"></span><span>/件</span></p>
                            <span class="tipSp"></span>
                        </div>
                        <div class="particulars_number">
                            <div class="infoLis">
                                <div class="infoDiv"></div>
                                <div id="trigger3">添加</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom_b" style="clear:both">
            <div class="par_now">
                <a href="/productLists" class="par_a articles"><img src="/img/00023.png" alt=""><p>在售商品</p></a>
                <a href="/UserCenter/pendingPayment" class="par_a shopping"><img src="/img/00021.png" alt=""><p>购物车</p></a>
            </div>
            <div class="buy" abc="">立即购买</div>
        </div>
    </div>
    <div class="provider">
        <div class="pro_top">
            <span style="color:#ea294b;">注:确认订单后请在10分钟内完成支付</span>
            <button type="button" class="shut">×</button>
        </div>
        <div class="pro_center">
            <div class="pro_num"><p class="pro_p1">数量:</p><p class="pro_p2 order_count"></p></div>
            <div class="pro_num"><p class="pro_p1">单价:</p><p class="pro_p2 order_sums"></p></div>
            <div class="pro_num" style="color:#ea294b;"><p class="pro_p1">总金额:</p><p class="pro_p2 order_prices"></p></div>
        </div>
        <div class="pro_bottom">
            <button class="pro_a" abc>确认订单</button>
        </div>
    </div>
    <div class="particulars_hint" style="display: none;"><p class="hint"></p></div>
    <input type="hidden" value="1000" class="pro_time">
    <div class="choice" style="display:none;">
        <div class="choiceT">
            <span class="choice_sp1">×</span>
            <span class="choice_sp2">请选择付款方式</span>
        </div>
        <div class="choiceC">
            <p class="choice_p choice_p_wx">
                <span class="bg_sp2"></span>
                <span class="choice_sp3">微信</span>
                <span class="choice_sp4"><i class="fa fa-circle-thin"></i></span>
            </p>
            <p class="choice_p choice_p_alipay">
                <span class="bg_sp3"></span>
                <span class="choice_sp3">支付宝</span>
                <span class="choice_sp4"><i class="fa fa-circle-thin"></i></span>
            </p>
        </div>
    </div>
    <div class="mask" style="display:none"></div>
    <div class="lds-css ng-scope"><div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div>
    <div class="loading-pay">
        <img src="{{ env('CDN_DOMAIN_NAME') }}/img/payLoading.svg" alt="">
    </div>
</div>
</body>
<script>
    var mobileSelect3 = new MobileSelect({
        trigger: '#trigger3',
        title: '请选择购买颜色尺码及数量',
        triggerDisplayData:false,
        wheels: [
            {data: ["加载中"]},
            {data: ['加载中']},
            {data: ['加载中']}
        ],
        position:[0, 0, 0, 0, 0],
        transitionEnd:function(indexArr, data){
//            console.log(data);
        },
        callback:function(indexArr, data){
            //console.log(data);
            $("#trigger3").siblings(".infoDiv").empty();
            if(data[0]!='加载中' && data[1]!='加载中' && data[2]!='加载中'){
                $("#trigger3").siblings(".infoDiv").append('<span class="colorInfo">'+data[0]+'</span><span class="sizeInfo">'+data[1]+'</span><span class="numInfo">'+data[2]+'</span>');
            }

            $("#trigger3").siblings(".infoDiv").addClass("mationInfo");
            $("#trigger3").parent(".infoLis").append('<i class="delI fa fa-close"></i>');
            $("#trigger3").remove();
            $(".particulars_number").append('<div class="infoLis"><div class="infoDiv"></div> <div id="trigger3">添加</div></div>');

            document.getElementById('scro').scrollTop=document.getElementById('scro').scrollHeight;
        }
    });
    $(document).on("click","#trigger3",function(){
        mobileSelect3.show();
    });

    var url=window.location.href;
    var goods_id=url.split("=")[1];
    /*刚进页面*/
    $.ajax({
        url:'/sale-goods-info',
        type:'get',
        data:{
            goods_id:goods_id
        },
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
        },
        dataType:'json',
        success:function(data){
            //console.log(data);
            if(data.result.success){
                if(data.content.control==true){
                    $(".buy").attr("abc","1");
                    $(".tipSp").text("一件起拍");
                }else{
                    $(".buy").attr("abc","3");
                    $(".tipSp").text("三件起拍");
                }
                var infos=data.content.goods_info;

                /*分享*/

                $(".titCla").val(infos.title);
                $(".desCla").val(infos.describe);
                $(".imgCla").val(infos.img);

                $(".horn_box").append('<marquee direction="left" behavior="scroll" scrollamount="2" width="100%" height="100%">'+infos.min_nums+'件起做</marquee>');
                document.title = infos.title;
                $(".girard").text(infos.girard);
                $(".pro_price").text(infos.price);
                $(".pro_a").attr("abc",infos.id);
                //抢购时间
                if(infos.start_time>1){  //开始时间大于1，显示倒计时
                    $(".tit_right").show();
                }
                $(".start_time").val(infos.start_time);
                $(".end_time").val(infos.end_time);


                var imgArr=data.content.img;
                var imgStr='';
                for(var f=0;f<imgArr.length;f++){

                    imgStr=imgStr+'<div class="swiper-slide" style="width:100%;">'+
                        '<div class="swiper-zoom-container" >'+
                        '<img class="swiper-lazy sw_img" data-src="{{ env('CDN_DOMAIN_NAME') }}/upload/'+imgArr[f]+'">'+
                        '<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>'+
                        '</div>' +
                        '</div>';
                }
                $(".swiper-wrapper").append(imgStr);
                swiper();


                mobileSelect3.updateWheel(0, data.content.color);
                mobileSelect3.updateWheel(1, ['5码','7码','9码','11码','13码','15码','17码']);
                mobileSelect3.updateWheel(2, ['1件','2件','3件','4件','5件','6件','7件','8件','9件','10件','11件','12件','13件','14件','15件','16件','17件','18件','19件','20件']);
            }else{
                $(".faceImg").attr("src","/img/weep.png");
                $(".oHandle").text(data.result.errorMsg);
                $(".oSuccess").show(0).delay(1000).hide(0);
            }
        }
    });
    /*更新第0个轮子的数据，数据变为英文的星期几*/
    //mobileSelect3.updateWheel(0,['sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']);
    // 重新定位第1个轮子的位置，将第1个轮子的第0个数据改为当前选中
    //mobileSelect3.locatePostion(1,4);

    /*删除*/
    $(document).on("click",".delI",function(){
        $(this).parent(".infoLis").remove();
    });
    /*iphoneX*/
//    var str= navigator.userAgent.toLowerCase();
//    var ver=str.match(/cpu iphone os (.*?) like mac os/);
//    if(ver && $(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){
//        $(".par_bottom").css("bottom","1.408rem");
//        $(".banner").css("bottom","7.803rem");
//    }
    //swiper();
    function swiper() {
        if($('.swiper-slide').length>1){//如果图片大于一张
            var swiper=new Swiper(".banner .swiper-container",{
                zoom:false,
                direction:"horizontal",
                // 如果需要分页器
                pagination:".swiper-pagination",
                loop:false,
                click:true,
                passiveListeners : false,
                preloadImages:false,
                lazyLoading: true,
                //observer:true,//修改swiper自己或子元素时，自动初始化swiper
                //observeParents:true//修改swiper的父元素时，自动初始化swiper

            });
            //swiper.onResize();//刷新swiper
        }else{//图片为一张
            var swiper=new Swiper(".banner .swiper-container",{
                zoom:false,
                direction:"horizontal",
                loop:false,
                click:true,
                passiveListeners : false,
                preloadImages:false,
                lazyLoading: true,
                //observer:true,//修改swiper自己或子元素时，自动初始化swiper
                //observeParents:true//修改swiper的父元素时，自动初始化swiper
            });
            swiper.onResize();//刷新swiper
        }
//        $(".swiper-pagination").append("<div class='bg-swiper'></div>");
//        var count=$('.swiper-slide').length;
//        if(count>1){
//            $('.bg-swiper').css("width",count*0.5+"rem");
//        }else{
//            $('.bg-swiper').css("width","0");
//        }
    }
    is_weixn('.buy');
    is_weixn('.par_now');


    /*限时抢购*/
    function countTime(){
        var start=$(".start_time").val();
        var end=$(".end_time").val();
        var now = $('.pro_time').val(); //服务器时间戳
        var rel_time = parseInt(now) + parseInt(1000);
        $('.pro_time').val(rel_time);
        var h,m,s;
        if (now<=start){
            $(".tit_change").html("未开始");
            $(".tit_right").show();
            h = Math.floor((start-now)/1000/60/60);
            m = Math.floor((start-now)/1000/60%60);
            s = Math.floor((start-now)/1000%60);

            $(".tit_time").html(add_zero(h)+":"+add_zero(m)+":"+add_zero(s));
            /*不能点购买*/
        };
        if(end !=0){
            if((now>start)&&(now<=end)){
                $(".tit_change").html("抢购中");
                $(".tit_start").html("结束倒计时");
                $(".particulars_name").css({"background":"#F64268","opacity":"0.7"});
                $(".tit_right").show();
                h = Math.floor((end-now)/1000/60/60);
                m = Math.floor((end-now)/1000/60%60);
                s = Math.floor((end-now)/1000%60);
                $(".tit_time").html(add_zero(h)+":"+add_zero(m)+":"+add_zero(s));
            };
            if(now>end){
                $(".tit_change").html("已结束");
                $(".particulars_name").css({"background":"#000","opacity":"0.3"});
                $(".tit_right").hide();
                clearInterval(timer);
                /*不能购买*/
            }
        }else{
            if(now>start){
                $(".tit_change").html("抢购中");
                $(".tit_right").hide();
                $(".particulars_name").css({"background":"#F64268","opacity":"0.7"});
            }
            if(start==0){
                $(".particulars_name").css({"background":"#F64268","opacity":"0.7"});
            }
        }
    }
    timer = setInterval(countTime,1000);
    /*倒计时加零*/
    function add_zero(n){
        return n < 10 ? '0'+ n : n;
    }
    /*点击立即购买*/
    $(".buy").click(function(){
        var status=$(this).attr("abc");
        var unit=$(".pro_price").text();
        var nums=0;
        for(var b=0;b<$(".numInfo").length;b++){
            var xm=$(".numInfo").eq(b).text().split("件")[0];
            nums= Number(nums)+Number(xm);
        }
        if(Number(nums) - Number(status) <0){
            $('.hint').text('起拍件数不够');
            $('.particulars_hint').show();
            setTimeout(function () {
                $('.particulars_hint').hide();
            },1600);
            return false;
        }
        var gross=Number(unit)*Number(nums);
        $('.order_count').text(nums+"件");
        $('.order_sums').text("￥"+unit);
        $('.order_prices').text("￥"+gross);
        $(".provider").stop().slideDown(200);
    });
    /*确认订单*/
    $(document).on("click",".pro_a",function(){
        $(this).attr("disabled","disabled");
        var that=$(this);
        var goods_id = $(this).attr("abc");
        var num=0;
        for(var b=0;b<$(".numInfo").length;b++){
            var xm=$(".numInfo").eq(b).text().split("件")[0];
            num= Number(num)+Number(xm);
        }
        var arr1=[];
        var info=[];
        var unit0=$(".pro_price").text();
        for(var g=0;g<$(".mationInfo").length;g++){
            var se=$(".mationInfo").eq(g).children(".colorInfo").text();
            var ma=$(".mationInfo").eq(g).children(".sizeInfo").text().split("码")[0];
            var jian=$(".mationInfo").eq(g).children(".numInfo").text().split("件")[0];
            var count=Number(unit0)*Number(jian);
            arr1.push(se);
            arr1.push(ma);
            arr1.push(jian);
            arr1.push(count);
            info.push(arr1);
            arr1=[];
        }
        console.log(info)
        $('.choice').show();
        $('.mask').show();
        that.removeAttr("disabled","disabled");
        $(".provider").stop().slideUp(200);
        $('.choice_p_wx').click(function(){
            $('.choice').hide();
            $('.mask').hide();
            $('.loading-pay').show();
            $.ajax({
                url:'/pre-sale-down-order',
                type:'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                },
                data:{
                    goods_id:goods_id,
                    info:info,
                    num:num
                },
                dataType:'json',
                success:function(data){
                    console.log(data);
                    if(data.success){
                        that.removeAttr("disabled","disabled");
                        window.location.href='/pay/wechat-pay-view/'+data.content;
                    }else{
                        that.removeAttr("disabled","disabled");
                        $('.loading-pay').hide();
                        $('.hint').text(data.msg);
                        $('.particulars_hint').show();
                        setTimeout(function () {
                            $('.particulars_hint').hide();
                        },1600);
                    }
                }
            })
        });
        $('.choice_p_alipay').click(function(){
            $('.choice').hide();
            $('.mask').hide();
            $('.loading-pay').show();
            $.ajax({
                url:'/pre-sale-down-order',
                type:'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                },
                data:{
                    goods_id:goods_id,
                    info:info,
                    num:num
                },
                dataType:'json',
                success:function(data){
                    console.log(data);
                    if(data.success){
                        that.removeAttr("disabled","disabled");
                        window.location.href='/pay/transition-sale?ordernum='+data.content;
                    }else{
                        that.removeAttr("disabled","disabled");
                        $('.loading-pay').hide();
                        $('.hint').text(data.msg);
                        $('.particulars_hint').show();
                        setTimeout(function () {
                            $('.particulars_hint').hide();
                        },1600);
                    }
                }
            })
        });
        $('.choice_sp1').click(function(){
            $('.choice').hide();
            $('.mask').hide();
        });
    });
    /*关闭*/
    $(".shut").click(function(){
        $(".provider").stop().slideUp(200);
    });

    //微信接口
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '{{ $info_we['appId'] }}', // 必填，公众号的唯一标识
        timestamp: '{{ $info_we['timestamp'] }}', // 必填，生成签名的时间戳
        nonceStr: '{{ $info_we['nonceStr'] }}', // 必填，生成签名的随机串
        signature: '{{ $info_we['signature'] }}',// 必填，签名，见附录1
        jsApiList: [
            'checkJsApi',
            'openLocation',
            'getLocation',
            'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
    wx.ready(function(){
        wx.checkJsApi({
            jsApiList: ['checkJsApi','openLocation','getLocation', 'onMenuShareAppMessage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
            success: function(res) {
//                console.log(res)
                // 以键值对的形式返回
                // ，可用的api值true，不可用为false
                // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
            }
        });
        wx.error(function(res){
//            alert('验证失败')
        });
        var imgurls = '{{ env('CDN_DOMAIN_NAME') }}';
        wx.onMenuShareAppMessage({
            title: $(".titCla").val(), // 分享标题
            desc: $(".desCla").val(), // 分享描述
            link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: imgurls+'/upload/'+$(".imgCla").val(), // 分享图标
            //imgUrl: imgurls+'/upload/default.png', // 分享图标

            type: 'link', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });
    });
</script>
</html>
